<template>
  <div>
    <!-- 第一步 资料设置 -->
    <!-- <First /> -->
    <!-- 第二步 资料维护 -->
    <!-- <Second /> -->
    <!-- 第三步 工单配置 -->
    <!-- <Third /> -->
    <!-- 第四步 资料设置 -->
    <!-- <Fourth /> -->
    <!-- <Fifth /> -->

    <div class="app-container">
      <div class="app-container-inner">
        <h3 class="h3_mrb">基础设置</h3>
        <ul class="ul_card">
          <li class="li_card" v-for="(item, index) in list" :key="index" @click="baseGo(index)">
            <i
              :class="`fa ${item.img}`"
              class="img_size"
              :style="{ 'background-color': item.bgcolor }"
              aria-hidden="true"
            ></i>
            <div>
              <h4 class="h4_mrb">{{ item.name }}</h4>
              <span class="color_9">{{ item.tip }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="app-container">
      <div class="app-container-inner">
        <h3 class="h3_mrb">编码管理</h3>
        <ul class="ul_card">
          <li class="li_card" v-for="(item, index) in codeSet" :key="index" @click="baseGo2(index)">
            <i
              :class="`fa ${item.img}`"
              class="img_size"
              :style="{ 'background-color': item.bgcolor }"
              aria-hidden="true"
            ></i>
            <div>
              <h4 class="h4_mrb">{{ item.name }}</h4>
              <span class="color_9">{{ item.tip }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="app-container">
      <div class="app-container-inner">
        <h3 class="h3_mrb">接入设置</h3>
        <ul class="ul_card_">
          <li
            class="li_card"
            v-for="(item, index) in pickUp"
            :key="index"
            @click="baseGo3(item.toUrl)"
          >
            <i
              :class="`fa ${item.img}`"
              class="img_size"
              :style="{ 'background-color': item.bgcolor }"
              aria-hidden="true"
            ></i>
            <div>
              <h4 class="h4_mrb">{{ item.name }}</h4>
              <span class="color_9">{{ item.tip }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="app-container">
      <div class="app-container-inner">
        <h3 class="h3_mrb">平台设置</h3>
        <ul class="ul_card_">
          <li
            class="li_card"
            v-for="(item, index) in sysSet"
            :key="index"
            @click="baseGo4(item.toUrl)"
          >
            <i
              :class="`fa ${item.img}`"
              class="img_size"
              :style="{ 'background-color': item.bgcolor }"
              aria-hidden="true"
            ></i>
            <div>
              <h4 class="h4_mrb">{{ item.name }}</h4>
              <!-- <span class="color_9">{{ item.tip }}</span> -->
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { ref } from 'vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.setting,
  })

  const router = useRouter()
  // 基础设置
  const list = ref([
    // {
    //   img: 'fa-diamond',
    //   name: '品牌管理',
    //   tip: '商品品牌设置',
    //   bgcolor: '#ff8d1a',
    // },
    {
      img: 'fa-list-alt',
      name: '商品设置',
      tip: '商品列表管理',
      bgcolor: '#43CF7C',
    },
    {
      img: 'fa-address-book-o',
      name: '客户设置',
      tip: '客户基础设置',
      bgcolor: '#7948EA',
    },
    {
      img: 'fa-map-marker',
      name: '服务商设置',
      tip: '服务商基础设置',
      bgcolor: '#AC33C1',
    },
    {
      img: 'fa-gears',
      name: '工单设置',
      tip: '工单基础设置',
      bgcolor: '#00C0C0',
    },
    {
      img: 'fa-jpy',
      name: '费用项目',
      tip: '费用类型设置',
      bgcolor: '#AC33C1',
    },
    {
      img: 'fa-cube',
      name: '返厂设置',
      tip: '返厂基础设置',
      bgcolor: '#007cff',
    },
    {
      img: 'fa-calendar-minus-o',
      name: '仓储设置',
      tip: '仓储基础设置',
      bgcolor: '#ff8d1a',
    },
  ])

  // 一物一码设置
  const codeSet = ref([
    {
      img: 'fa-calendar',
      name: '编码设置',
      tip: '编码基础设置',
      bgcolor: '#ff8d1a',
    },
    {
      img: 'fa-calendar-check-o',
      name: '编码策略',
      tip: '编码策略设置',
      bgcolor: '#00c0c0',
    },
  ])

  // 接入设置
  const pickUp = ref([
    {
      img: 'fa-link',
      name: '服务页面',
      tip: '客户报单页面',
      bgcolor: '#43CF7C',
      toUrl: '/busic/base/inforset?active=service',
    },
    {
      img: 'fa-wechat',
      name: '微信公众号',
      tip: '微信公众号对接',
      bgcolor: '#43CF7C',
      toUrl: '/busic/base/inforset?active=wxInter',
    },
    {
      img: 'fa-truck',
      name: '物流服务',
      tip: '物流服务对接',
      bgcolor: '#FF8D1A',
      toUrl: '',
    },
    {
      img: 'fa-server',
      name: '支付服务',
      tip: '支付渠道对接',
      bgcolor: '#AC33C1',
      toUrl: '',
    },
    {
      img: 'fa-comments-o',
      name: '微信通知',
      tip: '微信通知设置',
      bgcolor: '#43CF7C',
      toUrl: '/busic/base/inforset?active=wxNotice',
    },
    {
      img: 'fa-commenting-o',
      name: '手机短信',
      tip: '短信通知设置',
      bgcolor: '#007cff',
      toUrl: '/note/list',
    },
  ])
  //平台设置
  const sysSet = ref([
    {
      img: 'fa-address-book-o',
      name: '企业信息',
      // tip: '编码激活设置',
      bgcolor: '#7948EA',
      toUrl: '/basedata/platform?typeVal=2',
    },
    {
      img: 'fa-calendar',
      name: '全局设置',
      // tip: '编码基础设置',
      bgcolor: '#ff8d1a',
      toUrl: '/basedata/platform?typeVal=3',
    },
    {
      img: 'fa-diamond',
      name: '操作日志',
      // tip: '编码激活设置',
      bgcolor: '#00c0c0',
      toUrl: '/basedata/journal',
    },
    // {
    //   img: 'fa-diamond',
    //   name: '帮助中心',
    //   tip: '编码激活设置',
    //   bgcolor: '#00c0c0',
    //   toUrl: '/basedata/platform'
    // },
  ])
  //
  const baseGo = (val) => {
    switch (val + 1) {
      case 1:
        router.push('/busic/base/proset')
        break
      case 2:
        router.push('/busic/base/customset')
        break
      case 3:
        router.push('/busic/base/branchset')
        break
      case 4:
        router.push('/busic/base/orderset?active=set')
        break
      case 5:
        router.push('/busic/base/orderset?active=cost')
        break
      case 6:
        router.push('/busic/base/repairset')
        break
      case 7:
        router.push('/busic/base/stoset')
        break
      default:
        break
    }
  }
  const baseGo2 = (val) => {
    switch (val) {
      case 0:
        router.push('/busic/base/base?active=first')
        break
      case 1:
        router.push('/busic/base/base?active=second')
        break
    }
  }
  // 接入设置
  const baseGo3 = (val) => {
    if (!val) {
      ElMessage.success('正在升级维护中，敬请期待...')
      return
    }
    router.push(val)
    // switch (val) {
    //   case 0:
    //     router.push('/busic/base/inforset?active=service')
    //     break;
    //   case 1:
    //     router.push('/busic/base/inforset?active=wxInter')
    //     break;
    //   case 2:
    //     router.push('/busic/base/inforset?active=wxInter')
    //     break;
    //   case 3:
    //     router.push('/busic/base/logset')
    //     break;
    //   case 4:
    //     router.push('/busic/base/inforset?active=service')
    //     break;
    //   case 5:
    //     router.push('/busic/base/inforset?active=wxNotice')
    //     break;
    //   case 6:
    //     router.push('/busic/base/inforset?active=textNotice')
    //     break;
    //   default:
    //     break;
    // }
  }
  // 平台设置
  const baseGo4 = (val) => {
    if (!val) {
      ElMessage.success('正在升级维护中，敬请期待...')
      return
    }
    router.push(val)
  }
</script>
<style lang="scss">
  @import './index';
</style>
